<template>
  <div id="chat">
      <div class="banner">
          <img src="../../assets/chat.png" alt="">
      </div>
      <div class="chat_area" id="wechat">
          <div class="main_chat">
              <div class="show_text">
                    <ul v-html="emoji(result_info)" ref="abc" id="abc" @scroll="td">  
                    </ul>
              </div>
              <div class="input_text">
                  <div class="tool">
                      <ul>
                        <li><i class="fa fa-smile-o" aria-hidden="true" @click="showEmoji = !showEmoji"></i></li>
                        <transition name="fade" mode="">
                          <div class="emoji-box" v-if="showEmoji" >
                              <vue-emoji
                                @select="selectEmoji">
                              </vue-emoji>
                            <span class="pop-arrow arrow"></span>
                          </div>       
                        </transition>  
                        <li><i class="fa fa-mobile" aria-hidden="true" @click="zd()"></i></li>
                        <li><vue-core-image-upload
                          :class="['btn', 'btn-primary']"
                          :crop="false"
                          @imageuploaded="imageuploaded"
                          :data="imgdata"
                          :max-file-size="5242880"
                          url="./upload" 
                          text=""><i class="fa fa-picture-o" aria-hidden="true"></i>
                        </vue-core-image-upload></li>
                        <li><colorPicker v-model="color" v-on:change="headleChangeColor"><i class="fa fa-pencil" aria-hidden="true"></i></colorPicker></li>
                        <li><colorPicker v-model="color" v-on:bgchange="headlebgChangeColor"><i class="fa fa-comment-o" aria-hidden="true"></i></colorPicker></li>
                      </ul>
                  </div>
                  <div class="text_area">
                      <textarea id="text" v-model="info" @keyup.enter="sendinfo(info)"></textarea>
                  </div>
                  <div class="send">
                        <button @click="sendinfo(info)" >发送</button>
                  </div>
     
              </div>
          </div>
          <div class="on_line">
              <div class="on_line_list">在线列表</div>
              <div v-html="online_list"></div>
          </div>
      </div>
   </div>
</template>

<script>
import vueEmoji from '../Public/emoji.vue'
import VueCoreImageUpload  from 'vue-core-image-upload';
import colorPicker from '../Public/colorPicker'
export default {
  data () { 
    return {
      holder:'',
      ws:'',
      data:'',
      info:'',
      result_info:'',
      uid:'',
      online_list:'',
      value: '',
      showEmoji: false,
      data_emoji: [],
      timer2:'',
      second:0,
      timer:true,
      inter:'',
      imgdata: {
        src: '',
      },
      color:'#666',
      bgcolor:'#e2e2e2',
      send_msg:''

    }
  },
  created:function(){
    
    this.uid=this.$cookie.get('uid');
    if(this.uid == null){
      alert('请登录后访问！');
      window.location.href="/";
      return false;
    }  
    this.ws = new WebSocket("ws://123.56.86.203:8282");
      var that =this;
      that.ws.onmessage = function(e){
          // json数据转换成js对象
          
        this.data = eval("("+e.data+")");
        switch(this.data.type){
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init':
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                that.send_msg='<p class="p2" style=color:'+that.color+';background-color:'+that.bgcolor+'>'+that.$cookie.get('username')+'上线了</p>';
                that.$http.post("http://123.56.86.203/bind",
                  {
                    client_id: this.data.client_id,uid:that.$cookie.get('uid'),msg:that.send_msg
                  },
                  {emulateJSON:true}
                ).then(response=>{

                      var info = response.data;
               
                      if(info.status == 1){
                          alert('请勿重复打开聊天室');
                           window.location.href="/";
                           
                      }else{
                        that.on_line_list(info);
                      }
                      

                })
                break;
            case 'close':
                that.$http.post("http://123.56.86.203/close",
                  {
                    client_id: this.data.client_id,uid:that.$cookie.get('uid')
                  },
                  {emulateJSON:true}
                ).then(response=>{
                   var info = response.data;
                    that.on_line_list(info);
                })  
              break;
            default :
              var result=eval('('+e.data+')');
                that.result_info += '<li><div class="layout_p" >'+result.photo+'<p class="p1">'+result.username+'&nbsp;&nbsp;&nbsp;&nbsp;'+result.create_time+'</p>'+result.msg+'</div><div style="clear:left"></div></li>';
                  clearInterval(that.inter);
                 that.inter = setInterval(function() {
                  document.getElementById('abc').scrollTop = document.getElementById('abc').scrollHeight;
                },
                10);  
                 that.send_msg='';
                if(result.dd == 1){
                    that.dd();
                } 

        }

      }

  },
  components: {
      vueEmoji,
      'vue-core-image-upload': VueCoreImageUpload,
      colorPicker
  },
  mounted:function(){
    document.getElementById('text').focus();
  },
  watch:{
    result_info(){
                this.$http.post("http://123.56.86.203/online",
                  {
                    client_id: this.data.client_id
                  },
                  {emulateJSON:true}
                ).then(response=>{
                   var info = response.data;
                    this.on_line_list(info);
                })  
    }
  },
  methods: {

    sendinfo(info){

        var that =this;
        clearInterval(that.inter);
        if(info.length <=1 ){
          alert('请输入内容');
            that.info="";
          return false;
        }else{
            that.inter = setInterval(function() {
              document.getElementById('abc').scrollTop = document.getElementById('abc').scrollHeight;
            },
            10);
        }

        that.send_msg='<p class="p2" style=color:'+that.color+';background-color:'+that.bgcolor+'>'+that.info+'</p>';
        that.$http.post("http://123.56.86.203/message",
          {
            msg:that.send_msg,uid:that.uid
          },
          {emulateJSON:true}
        ).then(response=>{
            that.info="";

        })        
    },
    on_line_list(obj){
        this.online_list  = '';
        for(var i in obj){
            obj[i].summary = obj[i].summary==''?'这个人很懒，暂无简介':obj[i].summary.substring(0,10)+'...';
            this.online_list += '<div class="p">'+obj[i].photo+'<div class="text"><span style="font:15px/22px 微软雅黑;color:#666">'+obj[i].username+'</span><br><span style="font:13px/22px 微软雅黑;color:#999">'+obj[i].summary+'</span></div></div>'
        }
    },
    selectEmoji (code) {
      this.showEmoji = false
      this.info += code
    },
    zd(){
        if(this.second <5 && this.second>0){
          alert('5S后可重新发送');
          return false;
        }else{
          this.second =0;
        }
        var that =this;
        that.send_msg='<p class="p2" style=color:'+that.color+';background-color:'+that.bgcolor+'>发送了一个屏幕振动</p>';
        that.$http.post("http://123.56.86.203/message",
          {
            msg: that.send_msg,uid:that.uid,dd:1
          },
          {emulateJSON:true}
        ).then(response=>{
            
        })   
    },
    dd(){
      this.timer =setInterval(this.stop,1000);
      var wechat=document.getElementById('wechat');
      wechat.style.animation='wobble 2s 1 both'
    },
    stop(){
      this.second++;
      if(this.second>=5){
          wechat.style.animation=null;
          clearInterval(this.timer);
          this.second =0;
      }
    },
    td(){
      clearInterval(this.inter);
    },
      imageuploaded(res) {
        if(res.code == 0){
          this.info += '<img src=./uploads/'+res.filename+' style="width:300px;height:auto">';
        }else{
          alert('上传失败');
        }
    },
    headleChangeColor(res){
      this.color=res;
     
    },
    headlebgChangeColor(result){
      this.bgcolor=result;
    }
  }
}
</script>

<style>
#chat{
  width: 1000px;
  margin:0 auto;
}
#chat .banner{
  width: 100%;
  margin-top: 10px;
}
#chat .banner img{
  width: 100%;
}
.chat_area{
  width: 100%;
   margin-top: 20px;
}
.chat_area .main_chat{
  width: 72%;
  float: left;
  position: relative;
}
.chat_area .main_chat .show_text{
  height: 550px;
  border:1px solid #CCCCCC;
  background-color: #fff;
  width: 100%;
}
.chat_area .main_chat .show_text ul{
  height: 520px;
  width: 99%;
  margin-left: 0.5%;
  margin-top:5px;
  overflow-x:hidden;
  overflow-y:scroll;
}
.chat_area .main_chat .show_text ul li:first-child{
  margin-top: 10px;
}
.chat_area .main_chat .show_text ul li{
  width: 100%;
  margin-left: 20px;
  margin-bottom: 25px;
}

.chat_area .main_chat .show_text ul li img{
  width: 8%;
  float: left;
  border-radius: 50%;
}
.chat_area .main_chat .show_text ul li .p1{
  color:#999;
  font:13px/22px '微软雅黑';
    width: 83%;
}
.chat_area .main_chat .show_text ul li .p2{
  color:#666;
  font:15px/25px '微软雅黑';
  margin-top: 5px;
  background-color: #E2E2E2;
  padding: 2px 7px;
  max-width: 60%;
  border-radius: 5px;
}
.chat_area .main_chat .show_text ul li .p2 img{
  width: 30px;
  height: 30px;
}

.chat_area .main_chat .show_text ul li p{
  float: left;
  margin-left: 20px;

}
.chat_area .main_chat .input_text{
  height: 150px;
  border:1px solid #CCCCCC;
  width: 100%;
  background-color: #fff;  
}

.input_text .tool{
  height: 35px;
  width: 100%;
}
.input_text .tool ul{
  width: 100%;
  height:35px;
  position: relative;
}
.input_text .tool ul li{
  float: left;
  padding: 0 8px;

}
.input_text .tool ul li i{
  font-size: 22px;
    line-height: 35px;
}
.input_text .text_area{
  width: 100%;
  height: 80px;
}
.input_text .text_area textarea{
  margin-left:1%;
  width: 98%;
  height: 100%;
  border: 0px;
  resize:none;
  outline:none;
}
.input_text .send{
  width: 100%;
  height: 35px;
  background-color: #eee;
}
.input_text .send button{
  width: 18%;
  text-align: center;
  height: 27px;
  float: right;;
  margin-top: 4px;
  margin-right: 15px;
  font:bold 14px/27px '微软雅黑';
  background-color: #aaa;
  border:1px solid #aaa;
  color:#fff;
}
.chat_area .on_line{
  width: 25%;
  float: right;
  height: 700px;
  background-color: #fff;
  overflow-x:hidden;
  overflow-y:scroll;
}
.chat_area .on_line .p{
  width: 92%;
  padding: 3% 4%;
  height: 50px;
  animation:online 2s ease-in-out 0s 1;
}
@keyframes online{
  0%{
    opacity: 0;
  },
  100%{
    opacity: 1;
  }
}
.chat_area .on_line .p .text{
  float: left;
  width: 67%;
  margin-left:5%;
}
.chat_area .on_line .p img{
  width: 20%;
  float: left;
  border-radius: 50%;
}
.chat_area .on_line .on_line_list{
  width: 100%;
  height: 50px;
  text-align: center;
  font:17px/50px '微软雅黑';
}

#chat .emoji-box {

      position: absolute;
      z-index: 10;
      left: 0px;
      top:40px;
      box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
      background: white;
      .el-button {
        position: absolute;
        border: none;
        color: #FF4949;
        right: 12px;
        top: 12px;
        z-index: 10;
      }
      .arrow {
        left: 10px;
      }
    }

@keyframes wobble {
  0%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90% {
    transform: translateX(-2%)
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    transform: translateX(2%)
  }
}
</style>
